import React, { PureComponent } from 'react';
import Styles from '@/scss/rights.scss';
import IconStyles from '@/font_icon/iconfont.css';
//引入常量
import CONSTS from '@/inits/consts';
import Batch from '@/pages/components/rights/list/list_nav/list_batch';
import { Modal } from 'antd';

//右边头部组件，判断相应显示页面的title 传入当前显示页面的的类型
class TitleRender extends PureComponent<Iprops, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      isModalVisible: false,
    };
  }
  /**************** 函数方法部分   **************************** */
  //点击批量删除垃圾箱图标时间
  clearModel = () => {
    this.showModal();
  };
  //显隐对话框
  showModal = () => {
    this.setState({ isModalVisible: true });
  };
  //对话框确定事件
  handleOk = () => {
    this.setState({ isModalVisible: false });
    this.props.TitleRenderMethods.clearBatchdels();
  };
  //对话框取消事件
  handleCancel = () => {
    this.setState({ isModalVisible: false });
    this.props.TitleRenderMethods.clearBatchdelsNodel();
  };

  /************************* 渲染部分  *************************************** */
  //根据不用显示状态,显示不同的内容
  titleRender = () => {
    switch (this.props.isShow) {
      case CONSTS.ISSHOW.DONE:
        return this.titleValue(CONSTS.TITLEVALUE.DONE);
      case CONSTS.ISSHOW.UNDONE:
        return this.titleValue(CONSTS.TITLEVALUE.UNDONE);
      case CONSTS.ISSHOW.RECYCLE:
        return this.titleValue(CONSTS.TITLEVALUE.RECYCLE);
      case CONSTS.ISSHOW.MY:
        return this.titleValue(CONSTS.TITLEVALUE.MY);
      case CONSTS.ISSHOW.PAST:
        return this.titleValue(CONSTS.TITLEVALUE.PAST);
      case CONSTS.ISSHOW.COLLECT:
        return this.titleValue(CONSTS.TITLEVALUE.COLLECT);
      case CONSTS.ISSHOW.DATA:
        return this.titleValue(CONSTS.TITLEVALUE.DATA);
      default:
        return this.titleValue(CONSTS.TITLEVALUE.MY);
    }
  };
  //渲染函数
  titleValue = (value: string) => {
    return (
      <div className={Styles.title}>
        {' '}
        {value}
        {
          //此处使用两个三元判断  1.首先判断是否是回收站与个人中心,如果是则不渲染,,如果不是进入第二个三元   2.第二个三元判断的是当前是否为批量编辑状态
          this.props.isShow != CONSTS.ISSHOW.RECYCLE &&
          this.props.isShow != CONSTS.ISSHOW.DATA ? (
            this.props.batchdel ? (
              <div onClick={() => this.clearModel()} className={Styles.delete}>
                <i
                  className={`${IconStyles.iconfont} ${IconStyles.icon_huishouzhan}`}
                ></i>
              </div>
            ) : (
              <div className={Styles.batch}>
                <Batch
                  handleBatchdel={this.props.TitleRenderMethods.handleBatchdel}
                />
              </div>
            )
          ) : (
            ''
          )
        }
      </div>
    );
  };
  render() {
    return (
      <div>
        {/* 一、调用上述titleRender样式渲染函数式组件 */}
        {this.titleRender()}
        {/*二、 调用ui框架对话框 根据state状态决定显示隐藏,与vue状态一样 */}
        <Modal
          title="批量删除"
          cancelText={'取消'}
          okText={'确认'}
          style={{ top: 300, left: 100 }}
          visible={this.state.isModalVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          是否进行批量移入回收站
        </Modal>
      </div>
    );
  }
}
//必须传入isShow batchdel 以及函数
type Iprops = {
  isShow: string;
  batchdel: boolean;
  TitleRenderMethods: any;
};
export default TitleRender;
